<template>
  <div id="entrust">
    <x-header :left-options="{backText: ''}">
      全程委托
      <a slot="right" @click="jumpTo({path: '/history', query: {id: $route.query.id}})">
        <i>委托历史</i>
      </a>
    </x-header>
    <div class="tranHead">
      <div class="tranHeadCon">
        <img src="../../assets/img/transaction_header_banner.png" alt="">
        <div class="tranHeadText" v-show="false">
          <p>向上好品</p>
          <p>红幸计划</p>
        </div>
      </div>
    </div>
    <div class="entrustCon">
      <div class="entrustConBox">
        <ul>
          <li class="whiteBox" :class="{purple: cNameI === index}" @click="tabCNameI(item, index)" v-for="(item, index) in data" :key="index">
            <p>{{item.NumberValue}}日委托【日获利约3—6%】</p>
          </li>
          <li class="whiteBox">
            <label>
              <input type="text" placeholder="请输入进货单数" v-model="cargo">
            </label>
            <i>{{cargoPrice}}元</i>
          </li>
          <li class="explainInfo">
            <h2>活动规则</h2>
            <p>1、参与进货金额1万以上。</p>
            <p>2、用户可委托一次，委托结束后可继续委托。</p>
            <p>3、委托期间不可进行出货操作，自行出货视为解除委托协议，交易结果完全由用户本人自行承担。</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="btnBox">
      <button class="defBtn" @click="handALLentrust()">立即委托</button>
    </div>
  </div>
</template>

<script>
import { aLLentrust, getALLentrustDateBase, getPriceTrend, CreateCashPayALLEntrust } from '../../api'
import { mapState } from 'vuex'
import { GetQueryString } from '@utils/mixin'

export default {
  name: 'entrust',
  data () {
    return {
      cNameI: 0,
      data: {},
      trendPrice: 0,
      cargo: '',
      item: {}
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    ...mapState(['user']),
    cargoPrice () {
      return +this.cargo * +this.trendPrice
    }
  },
  created () {
    this.fetchALLentrustDateBase()
    this.fetchGetPriceTrend()
  },
  methods: {
    // 切换选项
    tabCNameI (item, index) {
      this.cNameI = index
      this.item = item
    },
    // 全程委托提交
    async handALLentrust () {
      if (this.cargo === '') {
        this.$toastText('请输入进货单数')
        return
      }
      if (+this.cargoPrice < +this.item.DeliveryExchangeDate) {
        this.$toastText('全程委托' + this.item.NumberValue + '日最小限额为' + this.item.DeliveryExchangeDate)
        return
      }
      let form = new FormData()
      console.log('user_id' + this.user.user_id)
      form.append('record_goods_id', this.id) // 商品ID
      form.append('record_user_id', this.user.user_id) // 用户ID
      form.append('commission_price', this.trendPrice) // 商品单价
      form.append('commission_num', this.cargo) // 总数量
      let res = await aLLentrust(form)
      if (res && res.code === 200) {
        let form1 = new FormData()
        form1.append('order_no', res.data.record_sn)
        form1.append('price', 0.01)
        form1.append('order_type', 'goods')
        form1.append('pay_type', 1)
        form1.append('code', GetQueryString('code'))
        form1.append('body', res.data.record_sn)
        form1.append('attach', res.data.record_sn)
        form1.append('return_url', window.location.href)
        let alipayData = await CreateCashPayALLEntrust(form1)

        this.$vux.confirm.show({
          title: '提示',
          content: '您购买' + this.cargo + '货单，需要支付' + this.cargoPrice + '元。点击确定进行支付宝支付。',
          onConfirm: () => {
            this.$AliPay(alipayData.data).then(() => {
              this.goBack()
            })
          }
        })
      } else {
        this.$toastText(res.msg)
      }
    },
    // 全程委托数据
    async fetchALLentrustDateBase () {
      let form = new FormData()
      form.append('type', 'FullDelegation_Days')
      let res = await getALLentrustDateBase()
      if (res && res.code === 200) {
        this.data = res.data
        this.item = res.data[this.cNameI]
      }
    },
    // 获取开盘价
    async fetchGetPriceTrend () {
      let res = await getPriceTrend()
      if (res && res.code === 200) {
        this.trendPrice = res.data.current_price
      } else if (res && res.code === 400) {
        this.trendPrice = res.data.current_price
      }
    }
  }
}
</script>

<style scoped lang="less">
#entrust{
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  /deep/ .vux-header {
    background: rgba(126,89,254,1);
    position: absolute;
    width: 100%;
    .vux-header-title{
      color: #fff;
    }
    .vux-header-left .left-arrow:before {
      border-width: .0125rem 0 0 .0125rem;
      border-color: #fff;
    }
    .vux-header-right{
      i{
        color: #FFFFFF;
      }
    }
  }
  .tranHead{
    width: 100%;
    height: 3.75rem;
    background: rgba(126,89,254,1);
    position: relative;
    .tranHeadCon{
      width: 9.46rem;
      height: 3.5rem;
      background: rgba(238,233,255,1);
      border-radius: .25rem;
      position: absolute;
      top: 85%;
      left: 50%;
      transform: translate(-50%, -50%);
      img{
        width: 100%;
        height: 100%;
      }
      .tranHeadText{
        background: rgba(238,233,255,1);
        display: inline-block;
        position: absolute;
        left: .7rem;
        top: 52%;
        transform: translateY(-50%);
        p{
          font-size: .425rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(46,6,149,1);
          line-height: .625rem;
          letter-spacing: calc(.1rem);
        }
      }
    }
  }
  .entrustCon{
    width: 100%;
    padding-top: 1.46rem;
    padding-bottom: 1.90334rem;
    .entrustConBox{
      width: 9.46rem;
      background: rgba(126,89,254,1);
      border-radius: .25rem;
      margin: auto;
      ul{
        padding: 1rem 1.5rem;
        .whiteBox{
          width: 100%;
          background:rgba(247,247,247,1);
          border-radius: .125rem;
          margin-bottom: .25rem;
          padding: .2rem .25rem;
          text-align: center;
          position: relative;
          p{
            font-size: .35rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(126,89,254,1);
            line-height: .675rem;
          }
          label{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0);
            input{
              border: none;
              display: inline-block;
              width: 100%;
              height: .6667rem;
              background: rgba(0,0,0,0);
            }
          }
          i{
            display: block;
            width: 100%;
            position: absolute;
            right: 0;
            bottom: -.6rem;
            font-size: .3rem;
            text-align: right;
            line-height: .6rem;
            color: #FFFFFF;
          }
        }
        .purple{
          background: rgba(46,6,149,1);
          p{
            color: rgba(255,255,255,1);
          }
        }
        .explainInfo{
          padding-top: .5rem;
          h2{
            font-size: .35rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255,255,255,1);
            line-height: .4rem;
            padding: .1rem 0 .3rem 0;
          }
          p{
            font-size: .32rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255,255,255,1);
            line-height: .4375rem;
          }
        }
      }
    }
  }
  .btnBox{
    width: 100%;
    height: 1.65rem;
    line-height: 1.65rem;
    background: #f7f7f7;
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 0 .2125rem;
    .defBtn{
      width: 100%;
      height: 1.225rem;
      background-image: linear-gradient(135deg, rgba(255,204,0,1), rgba(247, 76, 89, 0.4));
      border: none;
      border-radius: .1875rem;
      font-size: .375rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: rgba(255,255,255,1);
      line-height: .4375rem;
      text-align: center;
    }
  }
}
</style>
